<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback" id="main"></MyNav>



		<scroll-view scroll-y="true" class="contentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view class="contentList">


				<!-- 日历显示  open 表示是否展开日历 -->
				<view class="contentCalendar">
					<view class="contentCalendarInner">
						<ren-calendar ref='ren' :open="true" :markDays='markDays' :headerBar='true'
							@onDayClick='onDayClick' @onChangeMonthClick="onChangeMonthClick"></ren-calendar>
					</view>
					<!-- <view class="change">选中日期：{{curDate}}</view> -->
				</view>



				<view class="contentCenter">

					<text class="contentCenterTitle">班次:{{curDayData.workTime}}</text>


					<!-- 下半部分开始 -->
					<view class="contentTopDown">
						<view class="contentTopDownTop">
							<text class="contentTopDownTopText">正常</text>
							<text class="contentTopDownTopText">迟到</text>
							<text class="contentTopDownTopText">早退</text>
							<text class="contentTopDownTopText">缺卡</text>
						</view>

						<view class="contentTopDownBottom">
							<text class="contentTopDownBottomText">{{dataStatistics.normal}}天</text>
							<text class="contentTopDownBottomText">{{dataStatistics.beLate}}次</text>
							<text class="contentTopDownBottomText">{{dataStatistics.leaveEarly}}次</text>
							<text class="contentTopDownBottomText">{{dataStatistics.missCard}}次</text>
						</view>




					</view>
					<!-- 下半部分结束 -->


					<view class="contentOnTime">

						<view class="contentOnTimeLeft">
							<text class="contentOnTimeLeftText">上班时间:</text>
							<text class="contentOnTimeLeftTextColor" v-if="curDayData.goWorkTime!=null">
								{{curDayData.goWorkTime}} {{curDayData.goWorkType}}</text>
							<text class="contentOnTimeLeftTextColor" v-else>{{curDayData.goWorkType}}</text>
						</view>
						<view class="contentOnTimeRight" @click="clickBuKa()"
							v-if="curDayData.goWorkType=='缺卡' || curDayData.goWorkType==null">
							<text class="contentOnTimeRightText">补卡</text>
							<uni-icons class="contentOnTimeRightIcon" type="right" size="14"></uni-icons>

						</view>

					</view>

					<view class="contentOnTime">

						<view class="contentOnTimeLeft">
							<text class="contentOnTimeLeftText">下班时间:</text>
							<text class="contentOnTimeLeftTextColor" v-if="curDayData.offWorkTime!=null">
								{{curDayData.offWorkTime}} {{curDayData.offWorkType}}</text>
							<text class="contentOnTimeLeftTextColor" v-else>缺卡</text>
						</view>
						<view class="contentOnTimeRight" @click="clickBuKa()"
							v-if="curDayData.offWorkType=='缺卡' || curDayData.offWorkType==null">
							<text class="contentOnTimeRightText">补卡</text>
							<uni-icons class="contentOnTimeRightIcon" type="right" size="14"></uni-icons>

						</view>

					</view>

				</view>



				<view class="contentDaka">
					<view class="contentDakaTop" @click="clickData()">
						<text class="contentCenterTitleRecode">打卡记录</text>
						<uni-icons v-if="showList==false" class="contentOnTimeRightIcon" type="down"
							size="14"></uni-icons>
						<uni-icons v-if="showList==true" class="contentOnTimeRightIcon" type="up" size="14"></uni-icons>
					</view>


					<view class="contentDakaItem" v-for="(item,index) in curDayData.workTimeLogs" v-if="showList==true">
						<text class="contentDakaItemLeft"></text>
						<text class="contentDakaItemRight" v-if="item.devCheckType=='fa'">{{item.devCheckDateStr}} 人脸打卡</text>
					</view>


				</view>


			</view>
		</scroll-view>



	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
	import {
		myTimeDevMonthStatistics,myTimeDevWorktimelogList
	} from "@/pages/api/api.js";


	export default {
		components: {
			MyNav,
			bgImage


		},
		data() {
			return {
				title: '考勤记录',
				isback: true,
				curDate: '',
				markDays: [],

				// 是否显示打卡记录
				showList: false,

        dataStatistics: {
          beLate: 0, //迟到
          workHours: 0, //加班
          leaveEarly: 0, //早退
          missCard: 0, //缺卡
          normal: 0, //正常
        },
				listData: [],
				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				dateList: [],
				curDayData: {},
				parms: {},


				// 当前年月
				y: '', // 年
				m: '', // 月
				// 当前年月对应数据
				monthDays: [],

			}


		},

		onReady() {
			// 当前年月
			this.y = new Date().getFullYear() // 年
			this.m = new Date().getMonth() + 1 // 月

			let monthDays = this.$refs.ren.monthDay(this.y, this.m)
			this.monthDays = monthDays

			this.monthDays = this.monthDays.filter((item) => {
				return item.month == this.m;
			});
			console.log('获取当前年月数据', this.monthDays, this.y, this.m);

			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// 在其他页面或组件中访问
				const app = getApp();
				this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
					.totalHeight - 20


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

		},
		onLoad: function(option) {
			let item = JSON.parse(decodeURIComponent(option.item));
      console.log('item',item)
			this.curDate = item.curDate;
      let today = this.$refs.ren.getToday().date;
      console.log('today',today)
			this.markDays.push(today)
			// this.markDays.push(this.curDate)
			this.dateList = item.dateList
			this.parms = item.parms
      console.log('dateList',this.dateList)
			if (this.dateList.length > 0) {
				let that = this
				this.dateList.forEach(item => {
					if (item.workDate === this.curDate) {
						that.curDayData = item
						console.info('curDayData', this.curDayData)
					}
				})
			}
			// let month = this.formatDate(this.curDate);
      // let date ={date:this.curDate}
      // this.onDayClick(date)
			this.myTimeDevMonthStatistics()
		},
		methods: {
			// 去补卡
			clickBuKa() {
				uni.navigateTo({
					url: '/subPack/replacementCard/replacementCardDetail/replacementCardDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 查看打卡记录
			clickData() {
				this.showList = !this.showList
			},
			// 获取上月或下月数据
			onChangeMonthClick(data) {

				this.monthDays = data.dates
				this.monthDays = this.monthDays.filter((item) => {
          return item.month == data.m;
				});
				console.log('获取上月或下月数据', data, this.monthDays);

        let month = this.formatDate(data.y+'-'+data.m);
        this.curDate = month+'-01';

        this.markDays.push(this.curDate)
        // console.log('monthDays',this.monthDays)
        this.parms.month = month
        this.parms.pageNum = 1
        this.parms.pageSize = 50

        this.myTimeDevWorktimelogList()

        this.myTimeDevMonthStatistics()
      },
      formatDate(value) {
        const data = new Date(value);
        let month = data.getMonth() + 1;
        const year = data.getFullYear();
        month = month < 10 ? "0" + month : month;
        const formattedTime = `${year}-${month}`;
        return formattedTime;
      },
			onDayClick(data) {
				this.curDate = data.date;
				let that = this
				this.dateList.forEach(item => {
					if (item.workDate === that.curDate) {
						that.curDayData = item
						console.info('curDayData', this.curDayData)
					}
				})
				console.log('选择日期', this.curDate);
			},
			myTimeDevMonthStatistics() {
        console.log('parms',this.parms)
				myTimeDevMonthStatistics(this.parms).then((res) => {
					if (res.code == 200) {
						this.dataStatistics = res.data;
					}
				})
			},
      myTimeDevWorktimelogList(){
        myTimeDevWorktimelogList(this.parms).then((res) =>{
          if(res.code == 200){
            this.dateList = res.rows;
            let that = this
            this.dateList.forEach(item=>{
              if(that.curDate==item.workDate){
                that.curDayData = item;
              }
            })
          }
        })
      },
		}
	}
</script>

<style>
	.contentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;


		width: 690rpx;
		height: 800rpx;

		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.contentList {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;



	}

	.contentDakaItemRight {
		display: flex;
		align-items: center;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 120rpx;
		margin-left: 30rpx;
	}

	.contentDakaItemLeft {
		display: flex;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #0081FF;
		margin-left: 30rpx;

	}

	.contentDakaItem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 120rpx;
		width: 100%;
	}

	.contentDakaTop {
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		width: 100%;
		align-items: center;
	}

	.contentDaka {
		width: 690rpx;

		background: #FFFFFF;

		border-radius: 30rpx;

		margin-top: 30rpx;

		margin-bottom: 30rpx;
	}

	.contentOnTimeRightIcon {
		margin-right: 30rpx;
		display: flex;

		align-items: center;
	}

	.contentOnTimeRightText {
		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;
		line-height: 36rpx;
		align-items: center;
		margin-right: 30rpx;
	}

	.contentOnTimeRight {
		display: flex;
		align-items: center;
	}

	.contentOnTimeLeftTextColor {

		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FF4E00;
		line-height: 120rpx;
	}

	.contentOnTimeLeftText {
		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;

		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.contentOnTimeLeft {
		display: flex;
		height: 100%;
		align-items: center;

	}

	.contentOnTime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 120rpx;
		border-bottom: #F3F5F9 solid 1rpx;
	}

	.contentTopDownBottomText {

		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		width: 25%;
		line-height: 36rpx;

	}

	.contentTopDownBottom {

		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 50%;
	}

	.contentTopDownTopText {

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		width: 25%;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentTopDownTop {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 50%;

	}

	.contentTopDown {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 630rpx;
		height: 124rpx;
		background: #F3F5F9;
		border-radius: 20rpx;


		margin-bottom: 10rpx;
	}

	.contentCenterTitleRecode {
		display: flex;
		width: 100%;
		margin-left: 30rpx;

		justify-content: flex-start;
		align-items: center;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		line-height: 120rpx;
	}

	.contentCenterTitle {
		display: flex;
		width: 100%;
		margin-left: 30rpx;
		margin-top: 30rpx;
		justify-content: flex-start;
		align-items: center;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		line-height: 120rpx;
	}

	.contentCenter {
		width: 690rpx;
		height: 447rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
	}

	.contentCalendarInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 670rpx;

		border-radius: 30rpx;

		padding: 10rpx;
	}

	.contentCalendar {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		margin-top: 30rpx;



		background: #FFFFFF;
		border-radius: 30rpx;
	}
</style>
